<template>
  <Modal v-model:visible="visible" width="400px" :footer="null" title="验证超时,请输入验证码" :keyboard="false" :closable="false" :maskClosable="false">
    <p>如果验证码过期 请点击图片刷新</p>
    <div class="flex-s padding-bottom-20">
      <div class="v-bordered">
        <img :src="image" alt="图片未加载" @click="getCaptchaApiMethod">
      </div>
      <div class="v-input">
        <InputSearch v-model:value="param.code" :loading="loading" placeholder="请输入验证码" size="large"  enter-button="确认" @search="getVerificationApiMethod"></InputSearch>
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" >
import {defineComponent, ref, onMounted, watch, reactive } from 'vue';
import { Modal , Input ,  message } from "ant-design-vue";
import { getCaptchaApi, getVerificationApi } from "/@/api/home";
import { useStore } from "vuex";
interface queryConfig {
  code: string | number,
  key: string
}
export default defineComponent({
  components:{ Modal  ,Input , InputSearch: Input.Search},
  setup() {
    const store = useStore();
    const visible = ref<boolean>(false);
    const loading = ref<boolean>(false);
    const image = ref<string>('');
    const param = reactive<queryConfig>({ code: '', key: ''})
    const getCaptchaApiMethod = async () => {
      let res = await getCaptchaApi();
      image.value = res.image;
      param.key = res.key;
    };
    const getVerificationApiMethod = async () => {
      loading.value = true;
      let res = await getVerificationApi(param);
      let { success , data } = res ;
      if(success){
        message.success(data);
        store.commit("change", false);
        window.location.reload();
      }else {
        message.error( res.message )
      }
      loading.value = false;
    }
    const init = () => {
      getCaptchaApiMethod();
    }
    watch(
        () => store.state,
        (cur) => {
          visible.value = cur.verify.isShow;
          getCaptchaApiMethod();
        },
        { immediate: true, deep: true },
    );

    onMounted(init);
    return {
      visible  , getVerificationApiMethod ,getCaptchaApiMethod, param , image , loading
    }
  }
})
</script>
<style lang="less" scoped>
  .tc {
    height: 100px;
    margin-bottom: 20px;
    background: #EEE;
  }

  .v-bordered{
    border: 1px solid #D8D8D8;

    img{
      display: block;
      width: 138px;
      height: 38px;
      cursor: pointer;
    }
  }

  .v-input{
    width: 200px;
  }

  .padding-bottom-20{
    padding-bottom: 20px;
  }

  ::v-deep(.ant-input-group-addon){
    .ant-input-search-button{
      width: 70px;
    }
  }
</style>

